
<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import pub from '../widget.pub.js'
  import scroll from '../widget.scroll.js'
  import src from '../widget.src.js'
  
  let index = 0

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'TreeV2',
        tagName: 'w-tree-v2',
        remark: `用来显示大数据的树。请注意：使用TreeV2必须有高度。`,
        extends: [pub, src],
        deprecate: 'request([fn])',
        attrs: [
          {
            name: 'children',
            type: 'Array',
            remark: '子节点数据集',
            default: ''
          },
          {
            name: 'alias',
            type: 'Object',
            remark: '属性别名',
            option: `<div><var>value</var>: String 唯一标识对应的属性名</div>
                     <div><var>text</var> String 文本标签对应的属性名</div>
                     <div><var>children</var> String 子对象数组对应的属性名</div>`,
            default: ''
          },
          {
            name: 'item-height',
            type: 'Number',
            remark: '行高',
            default: '40'
          },
          {
            name: 'loading',
            type: 'Boolean',
            remark: '是否显示loading效果',
            default: ''
          },
        ],
        methods: [
          {
            name: 'focus(id)',
            remark: '聚焦到指定的id',
            option: '<var>id</var>: String',
            return: '',
          },
          {
            name: 'find(id)',
            remark: '根据id查找',
            option: '<var>id</var>: String',
            return: '',
          },
          {
            name: 'merge(data)',
            remark: '合并数据',
            option: '<var>data</var>: Array',
            return: '',
          }
        ],
        slots: [{
          name: 'box',
          remark: '复选框表单',
          option: 'w-triplebox / w-checkbox / w-radio'
        }, {
          name: 'text',
          remark: '显示内容',
          option: ''
        }],
        examples: [{
          remark: '带图标，点击树节点有聚焦效果',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-tree-v2 height="200" :current="focusLeafID" @click:item="clickLeaf" :alias="{value: 'id'}" :children="treeList">
              </w-tree-v2>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    focusLeafID: null,
                    treeList: [
                      {id: '10000', text: '福建省', expanded: true, children: [
                        {id: '10100', text: '福州市'},
                        {id: '10200', text: '厦门市'}
                      ]},
                      {id: '20000', text: '广东省', expanded: true, children: [
                        {id: '20100', text: '广州市'},
                        {id: '20200', text: '深圳市', children: [
                          {id: '20101', text: '福田区'},
                          {id: '20202', text: '罗湖区'}
                        ]}
                      ]},
                    ]
                  }
                },
                methods: {
                  clickLeaf(e, item) {
                    this.focusLeafID = item.id
                  }
                }
              }
            </${'script'}>
            `,
					comp: {
						data() {
						  return {
						    focusLeafID: null,
						    treeList: [
						      {id: '10000', text: '福建省', expanded: true, children: [
						        {id: '10100', text: '福州市'},
						        {id: '10200', text: '厦门市'}
						      ]},
						      {id: '20000', text: '广东省', expanded: true, children: [
						        {id: '20100', text: '广州市'},
						        {id: '20200', text: '深圳市', children: [
						          {id: '20101', text: '福田区'},
						          {id: '20202', text: '罗湖区'}
						        ]}
						      ]},
						    ]
						  }
						},
						methods: {
              clickLeaf(e, item) {
                this.focusLeafID = item.id
              }
						}
					}
        }, {
          remark: '从服务器获取数据展开子节点',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-tree-v2 height="200" :current="focusLeafID" :alias="{value: 'id'}" :children="treeList" :src="getSrc">
              </w-tree-v2>
            </template>
            <${'script'}>
              let index = 0
              export default {
                data() {
                  return {
                    treeList: [
                      {id: '10000', text: '福建省', hasChild: true},
                      {id: '20000', text: '广东省', hasChild: true},
                    ]
                  }
                },
                methods: {
                  getSrc(item) {
                    if (!item || !item.hasChild) return null
                    //return () => $.ajax.get($.urlParam('/getdata.php', {id: item.id})).then(res => item.children = res)
                    //在API环境下用下面的方法模拟获取远端数据；实际开发中应使用类似上面注释的语句
                    return (leaf) => new Promise(resolve => {
                      let hasChild = item.hasChild
                      setTimeout(() => resolve([{id: ++index, text: '子节点' + index, hasChild}, {id: ++index, text: '子节点' + index, hasChild}]), 300)
                    }).then(res => item.children = res)
                  }
                }
              }
            </${'script'}>
            `,
					comp: {
						data() {
              return {
                focusLeafID: null,
						    treeList: [
						      {id: '10000', text: '福建省', hasChild: true},
						      {id: '20000', text: '广东省', hasChild: true},
						    ]
						  }
						},
						methods: {
						  getSrc(item) {
                if (!item || !item.hasChild) return null
						    //return () => $.ajax.get($.urlParam('/getdata.php', {id: item.id})).then(res => item.children = res)
						    //在API环境下用下面的方法模拟获取远端数据；实际开发中应使用类似上面注释的语句
						    return () => new Promise(resolve => {
						      let hasChild = item.hasChild
						      setTimeout(() => resolve([{id: ++index, text: '子节点' + index, hasChild}, {id: ++index, text: '子节点' + index, hasChild}]), 300)
						    }).then(res => item.children = res)
						  }
						}
					}
        }]
      }
    }

  }
</script>

<style>
</style>
